<template>
  <div class="labelContent flex-space-between">
    <div class="labels">
      <div class="labelItems flex-space-center"
           :class="{'activityChoosed':item.checked}"
           v-for="(item,index) in labelList"
           @click.stop="changeLabel(item)"
           :key="index">
        {{ item.name }}
      </div>
    </div>
    <div class="button" @click.stop="compareLabel()">
      <button>完成</button>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
      }
    },
    props:['labelList'],
    methods:{
      // 切换标签
      changeLabel(item){
        this.$emit('changeLabel',item)
      },
      // 完成按钮
      compareLabel(){
        this.$emit('compareLabel',this.labelList)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../assets/less/common);
  .labelContent{
    flex-direction: column;
    .labels{
      width:100%;
      flex:1;
      padding:1.2rem 0.34rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      overflow-y: scroll;
      .labelItems{
        height:0.56rem;
        padding:0 0.32rem;
        box-sizing:border-box;
        background:#232323;
        border-radius: 0.28rem;
        font-size: @fontSize28;
        font-weight: @fontWeight400;
        font-family: @fontFamily500;
        color:@whiteColor;
        margin-bottom: 0.4rem;
        margin-right: 0.4rem;
      }
      .activityChoosed{
        background:#FFE600;
        color:#4C4720;
      }
    }
    .button{
      position: fixed;
      bottom:1rem;
      left:0.3rem;
      right:0.3rem;
      height:0.86rem;
      button{
        width:100%;
        height:100%;
        background:#FD0000;
        border-radius:0.1rem;
        font-size: @fontSize36;
        font-weight: @fontWeight400;
        font-family: @fontFamily500;
        color:@whiteColor;
      }
    }
  }

</style>
